@extends('layouts.admin')

@section('title', '仪表盘')

@section('content')
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f8f8f8;
            color: #333;
            line-height: 1.6;
        }

        .container {
            display: flex;
            min-height: 100vh;
        }

        .sidebar {
            width: 250px;
            background-color: #ffffff;
            padding: 20px 0;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        }

        .sidebar h1 {
            color: rgb(255, 187, 1);
            padding: 0 20px 20px;
            border-bottom: 1px solid #e0e0e0;
            margin-bottom: 20px;
            font-size: 22px;
        }

        .sidebar ul {
            list-style: none;
        }

        .sidebar li {
            padding: 12px 20px;
            color: #000000;
        }

        .sidebar li a {
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .sidebar li:hover {
            background-color: #f5f5f5;
        }

        .sidebar li.active {
            background-color: rgb(255, 238, 193);
            color: #000000;
            border-left: 4px solid rgb(255, 187, 1);
        }

        .main-content {
            flex: 1;
            padding: 25px;
            background-color: #f8f8f8;
        }

        .route-section {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 25px;
            overflow: hidden;
            border: 1px solid #e0e0e0;
        }

        .route-header {
            background-color: rgb(255, 187, 1);
            color: white;
            padding: 12px 25px;
            font-weight: bold;
            font-size: 16px;
        }

        .campus-header {
            font-weight: bold;
            font-size: 15px;
            padding: 12px 25px;
            border-bottom: 1px solid #f0f0f0;
            background-color: #fafafa;
        }

        .campus-content {
            padding: 12px 25px;
            border-bottom: 1px solid #f0f0f0;
        }

        .campus-section:last-child .campus-content {
            border-bottom: none;
        }

        .truckers-label {
            font-weight: 500;
            margin-bottom: 8px;
        }

        .trucker-item {
            margin-left: 20px;
            padding: 4px 0;
            font-family: monospace;
        }

        .no-trucker {
            color: #999;
            font-style: italic;
            margin-left: 20px;
        }

        .time-arrival {
            margin-top: 12px;
            font-weight: 500;
        }

        .time-value {
            margin-left: 20px;
            font-family: monospace;
            color: #ff6600;
            font-weight: bold;
            margin-top: 4px;
        }

        .package-item, .info-item {
            padding: 8px 0;
            border-bottom: 1px dashed #eee;
        }

        .package-config {
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }

        .config-option {
            display: inline-block;
            margin-right: 20px;
        }

        .open-button {
            background-color: rgb(255, 187, 1);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }

        .package-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .package-table th {
            background-color: rgb(255, 187, 1);
            color: white;
            padding: 12px;
            text-align: left;
        }

        .package-table td {
            padding: 10px 12px;
            border-bottom: 1px solid #eee;
        }

        .package-table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .package-table tr:hover {
            background-color: #f1f1f1;
        }

        .status-running {
            color: #28a745;
            font-weight: bold;
        }

        .divider {
            border-top: 2px solid #ddd;
            margin: 20px 0;
        }

        .input-list-header {
            font-weight: bold;
            margin-bottom: 10px;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            padding: 10px 0;
        }

        .pagination a {
            color: #333;
            padding: 8px 16px;
            text-decoration: none;
            border: 1px solid #ddd;
            margin: 0 4px;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .pagination a.active {
            background-color: rgb(255, 187, 1);
            color: white;
            border: 1px solid rgb(255, 187, 1);
        }

        .pagination a:hover:not(.active) {
            background-color: #ddd;
        }

        .pagination a.disabled {
            color: #aaa;
            pointer-events: none;
            cursor: default;
        }

        .package-table {
            margin-bottom: 0;
        }
        .sidebar li.Start {
            background-color: rgb(255 255 255);
            color: #000000;
            border-left: 4px solid rgb(255 255 255);
            font-weight: 700;
        }
    </style>

        <div class="sidebar">
            <h1>Campus Fxpress</h1>
            <ul>
                <li class="active"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li><a href="{{ route('admin.Package_List') }}">Package List</a></li>
                <li><a href="{{ route('admin.Campus_List') }}">Campus List</a></li>
                <li class="Start"><a href="#">Start Management</a></li>
                <li><a href="{{ route('admin.Courier_List') }}">Contact List</a></li>
                <li><a href="{{ route('admin.Trucker_List') }}">Trucker List</a></li>
            </ul>
        </div>

        <div class="main-content">

            <div class="main-content">
                <div class="route-section">
                    <div class="route-header">Route A</div>

                    @foreach(['A' => 1, 'B' => 2, 'C' => 3, 'D' => 4, 'E' => 5] as $campusName => $campusId)
                        <div class="campus-section">
                            <div class="campus-header">Campus {{ $campusName }}</div>

                            @if(isset($groupedStaffs[1][$campusId]) && $groupedStaffs[1][$campusId]->isNotEmpty())
                                <div class="campus-content">
                                    <div class="truckers-label">Truckers:</div>
                                    @foreach($groupedStaffs[1][$campusId] as $staff)
                                        <div class="trucker-item">
                                            {{ $staff->first_name }} {{ $staff->last_name }}
                                        </div>
                                        <div class="time-arrival">Time of Arrival at the Station</div>
                                        <div class="trucker-item">
                                            {{ $staff->to_campus_time }}
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="no-trucker">No trucker in the campus.</div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="main-content">
            <div class="route-section">
                <div class="route-header">Route B</div>
                <div class="campus-section">


                            @foreach(['E' => 1, 'D' => 2, 'C' => 3, 'B' => 4, 'A' => 5] as $campusName => $campusId)
                                <div class="campus-section">
                                    <div class="campus-header">Campus {{ $campusName }}</div>

                                    @if(isset($groupedStaffs[1][$campusId]) && $groupedStaffs[1][$campusId]->isNotEmpty())
                                        <div class="campus-content">
                                            <div class="truckers-label">Truckers:</div>
                                            @foreach($groupedStaffs[1][$campusId] as $staff)
                                                <div class="trucker-item">
                                                    {{ $staff->first_name }} {{ $staff->last_name }}
                                                </div>
                                                <div class="time-arrival">Time of Arrival at the Station</div>
                                                <div class="trucker-item">
                                                    {{ $staff->to_campus_time }}
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <div class="no-trucker">No trucker in the campus.</div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
            </div>
        </div>

@endsection

